<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="css/layout.css">
	<link rel="stylesheet" href="css/jPicker-1.1.6.min.css">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="">
</head>
<body>


	<section id="uicut-app">
		<section class="g-mainBox">
			<section class="g-sideMenu scroll">
				<div class="title">基本组件</div>
				<ul class="list">
					<li><a href=""><img src="images/uc-icon-sidemenu1-1.png" alt="">轮播图</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu1-2.png" alt="">广告位</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu1-3.png" alt="">宫格导航</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu1-4.png" alt="">标题</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu1-5.png" alt="">图文集</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu1-6.png" alt="">图片列表</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu1-7.png" alt="">三方图</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu1-8.png" alt="">四方图</a></li>
					<li></li>
				</ul>
				<div class="title">辅助组件</div>
				<ul class="list">
					<li><a href=""><img src="images/uc-icon-sidemenu2-1.png" alt="">视频</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu2-2.png" alt="">音频</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu2-3.png" alt="">富文本</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu2-4.png" alt="">辅助空白</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu2-5.png" alt="">分割线</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu2-6.png" alt="">悬浮图标</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu2-7.png" alt="">按钮</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu2-8.png" alt="">表单</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu2-9.png" alt="">客服</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu2-10.png" alt="">公告</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu2-11.png" alt="">流量主</a></li>
					<li></li>
				</ul>
				<div class="title">商城组件</div>
				<ul class="list">
					<li><a href=""><img src="images/uc-icon-sidemenu3-1.png" alt="">商品集</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu3-2.png" alt="">产品集</a></li>
					<li><a href=""><img src="images/uc-icon-sidemenu3-3.png" alt="">搜索框</a></li>
				</ul>
			</section>
			<section class="g-centerBox scroll">
				<div class="operate">
					<a href="" class="btn">添加到模板库</a>
					<a href="" class="btn btns-submit">保存修改页面</a>
					<a href="" class="btn">模板导入</a>
				</div>
				<div class="view-box">
					<div class="content-box scroll">

						<template v-for="item in pageParam">
							<template v-if="item.type=='banner'">
								<div class="view-banner uc-edit" :style="'height:'+item.details.boxHeight+'px'">
									<a href="" class="g-viewBoxClose">x</a>
									<img src="images/uc-banner.jpg" alt="">
									<div v-if="item.details.dotShow" class="dot-box">
										<template v-for="(itemImg,itemImgIndex) in item.details.imgs">
											<template v-if="itemImgIndex==0"><i class="dot dot-on" style="background-color: red;"></i></template>
											<template v-else><i class="dot" style="background-color: #999;"></i></template>
										</template>
									</div>
								</div>
							</template>
						</template>

					</div>
				</div>
			</section>
			<section class="g-rightParam scroll">


				<template v-for="item in pageParam">
					<template v-if="item.type=='banner'">
						<!-- 轮播图 -->
						<div class="setting-banner">
							<div class="title">轮播图</div>
							<div class="title2">选择颜色</div>
							<div class="color-choose-box">
								<div class="item"><em class="tt">焦点</em> <span id="colorChoose1" style="'background-color:#'+item.details.dotColorSelect"></span></div>
								<div class="item"><em class="tt">背景</em> <span id="colorChoose2" style="'background-color:#'+item.details.dotColor"></span></div>
							</div>
							<div class="title2">显示焦点</div>
							<div class="radio-box">
								<label for="" class="uc-radio on">显示</label><label for="" class="uc-radio">不显示</label>
							</div>
							<div class="title2">轮播图高度</div>
							<div class="g-range">
								<input type="range" min="0" max="200" value="30" step="1" class="js_ration">
								<!-- <span class="ration-value">30%</span> -->
							</div>
							<div class="upload-img-box">

								<template v-for="(itemImg,itemImgIndex) in item.details.imgs">
									<div class="item">
										<h4><i class="red">*</i>建议尺寸750x360 
											<span href="" class="btn-close" :data-id="itemImgIndex" v-on:click="deleteBannerImg"></span>
										</h4>
										<div class="btn-upload">
											<template v-if="itemImg.src!=''">
												<img :src="itemImg.src" alt="">
											</template>
											<input type="file" name="" class="btnInputUploadImg">
										</div>
										<div class="btm">
											<span class="tt">链接: </span><input type="text" v-model="itemImg.src">
										</div>
									</div>
								</template>
								<span href="" class="btn-add" v-on:click="addBannerImg">+添加</span>
							</div>
						</div>
					</template>
				</template>




			</section>
		</section>
	</section>



















	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.nicescroll3.7.6.min.js"></script>
	<script src="js/jpicker-1.1.6.min.js"></script>
	<script src="js/vue.min.js"></script>
	<script src="js/vue-common.js"></script>
	<script src="js/vue-resource.js"></script>
	<script src="js/main.js"></script>
</body>
</html>